<template>
    <div class="MenuList">
        <el-card class="MenuList-header">
            <div class="search-input">
                <p class="search-input-name">菜单名 : </p>
                <el-input class="search-input-tool" v-model="menuName" placeholder="请输入菜单名" />
            </div>
            <el-button 
                type="primary" 
                class="opera-search"
                :icon="Search"
                @click="SearchOpera" 
            >搜索</el-button>
            <el-button 
                class="opera-search"
                :icon="Refresh"
                @click="RefreshOpera" 
            >重置</el-button>
        </el-card>
        <el-card class="MenuList-section">
            <el-button type="primary" @click="CreateMenu" class="opera-createMenu">新建菜单</el-button>
            <div class="MenuList-content">
                <TableModules :data="menuData">
                    <template #tableContent>
                        <el-table-column prop="name" label="菜单名"/>
                        <el-table-column prop="sort" align="center" label="排序" />
                        <el-table-column fixed="right" align="center" label="操 作" width="200">
                            <template #default="scope">
                                <el-button type="primary" size="small" @click="EditMenu(scope.row)">修 改</el-button>
                                <el-button type="danger" size="small" @click="DeletMenu(scope.row)">删 除</el-button>
                            </template>
                        </el-table-column>
                    </template>
                </TableModules>
            </div>
            <div class="MenuList-footer">
                <PaginationModules
                    :pageTotal="pageTotal"
                    @currentClick="CurrentClick" 
                ></PaginationModules>
            </div>
        </el-card>
        <el-dialog
            v-model="menuDialogVisible"
            :title="operaTypeName"
            width="400px"
            class="menuDialog"
            align-center
        >
            <div class="menuDialog-section">
                <div class="menuDialog-section-chunk">
                    <p class="chunk-input-name">菜单名 : </p>
                    <el-input v-model="dialogMenuValue" class="chunk-input-value" placeholder="请输入菜单名" />
                </div>
                <div class="menuDialog-section-chunk">
                    <p class="chunk-input-name">排序号 : </p>
                    <el-input v-model="dialogSortValue" class="chunk-input-value" placeholder="请输入排序号" />
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="menuDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="MenuDialogConfig">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
    
<script setup>
import { onMounted, ref } from 'vue';
import TableModules from '@/components/TableModules.vue';
import PaginationModules from '@/components/PaginationModules.vue';
import { GetMenuList,CreateMenuReq,DeletMenuReq } from '../utils/api/index.js';
import { Search,Refresh } from '@element-plus/icons-vue';
const menuName = ref(''); // 菜单名
const menuData = ref([]); // 菜单数据
const menuDialogVisible = ref(false); // 菜单弹框开关
const operaTypeName = ref(''); // 操作类型名
const isEdit = ref(false); // 是否编辑
const editRowVal = ref(''); // 编辑的行值
const dialogMenuValue = ref(''); // 弹框菜单值
const dialogSortValue = ref(''); // 弹框排序值
const dialogConfigFlag = ref(false); // 弹框确定开关
const pageNum = ref(1);
const pageSize = ref(10);
const pageTotal = ref(0); // 总条数
const SearchOpera = () => {
    GetMenuListData(menuName.value);
}
const RefreshOpera = () => {
    menuName.value = '';
    GetMenuListData();
}
const GetMenuListData = async (name = undefined) => {
    let menuRes = await GetMenuList({
        name,
        pageNum: pageNum.value,
        pageSize: pageSize.value
    })
    if(menuRes.code == 200) {
        menuData.value = menuRes.data.list;
        pageTotal.value = menuRes.data.total;
    }
};
onMounted(() => {
    GetMenuListData()
})
// 创建菜单
const CreateMenu = () => {
    menuDialogVisible.value = true;
    dialogMenuValue.value = '';
    dialogSortValue.value = '';
    isEdit.value = false;
    operaTypeName.value = '新建'
}
// 修改菜单
const EditMenu = (rowValue) => {
    menuDialogVisible.value = true;
    dialogMenuValue.value = rowValue.name;
    dialogSortValue.value = rowValue.sort;
    isEdit.value = true;
    editRowVal.value = rowValue;
    operaTypeName.value = '修改'
}
// 确认菜单弹框
const MenuDialogConfig = () => {
    if(dialogConfigFlag.value) return;
    dialogConfigFlag.value = true;
    if(dialogMenuValue.value == '') {
        // eslint-disable-next-line no-undef
        ElMessage({
            message: '菜单名不能为空',
            type: 'warning',
        })
        return;
    }
    console.log(isEdit.value, editRowVal.value.id, '____')
    CreateMenuReq({
        name: dialogMenuValue.value,
        sort: dialogSortValue.value != '' ? dialogSortValue.value : 1,
        id: isEdit.value ? editRowVal.value.id : 0
    }).then((res) => {
        if(res.code == 200) {
            dialogConfigFlag.value = false;
            menuDialogVisible.value = false;
            // eslint-disable-next-line no-undef
            ElMessage({
                showClose: true,
                message: isEdit.value ? '修改成功' : '新建成功',
                type: 'success',
            })
            GetMenuListData();
        }
    });
}
// 删除菜单
const DeletMenu = (rowValue) => {
    // eslint-disable-next-line no-undef
    ElMessageBox.confirm(
        '确定要删除吗？',
        '删除菜单',
        {
            confirmButtonText: '确 定',
            cancelButtonText: '取 消',
            type: 'warning',
        }
    )
    .then(() => {
        DeletMenuReq({
            id: rowValue.id
        }).then((res) => {
            if(res.code == 200) {
                GetMenuListData();
                // eslint-disable-next-line no-undef
                ElMessage({
                    type: 'success',
                    message: '删除成功！',
                })
            }
        })
    })
};
// 分页前进/后退
const CurrentClick = (pageVal) => {
    pageNum.value = pageVal;
    GetMenuListData(menuName.value);
}
</script>
    
<style scoped lang="scss">
.MenuList{
    width: 100%;
    height: 100%;
    &-header{
        height: 85px;
        :deep(.el-card__body){
            display: flex;
            align-items: center;
            .search-input, .search-select{
                display: flex;
                align-items: center;
                // font-size: 18px;
                &:nth-child(n + 2) {
                    margin: 0 0 0 20px;
                }
                &-tool{
                    width: 200px;
                    margin: 0 0 0 20px;
                }
            }
            .opera-search{
                margin: 0 0 0 20px;
            }
            .opera-createMenu{
                margin: 0 0 0 20px;
            }
        }
    }
    &-section{
        width: 100%;
        height: calc(100% - 85px - 10px) ;
        display: flex;
        flex-direction: column;
        margin: 10px 0 0;
        :deep(.el-card__body){
            height: 100%;
        }
        .MenuList-content{
            height: calc(100% - 32px - 50px - 20px) ;
            display: flex;
            margin: 20px 0 0;
        }
        .MenuList-footer{
            height: 50px;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
        }
    }
    .menuDialog{
        &-section{
            display: flex;
            flex-direction: column;
            align-items: center;
            &-chunk{
                display: flex;
                align-items: center;
                // font-size: 18px;
                &:last-child{
                    margin: 20px 0 0;
                }
                .chunk-input-name{
                    width: 80px;
                    text-align: center;
                }
                .chunk-input-value{
                    width: 200px;
                    margin: 0 0 0 10px;
                }
            }
        }
    }
}
</style>